<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
    <meta charset="UTF-8">
    <title>发起活动</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/wangyeicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/current.css">
    <link rel="stylesheet" href="../../css/set_model.css">
    <style type="text/css">
        body{
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <!-- 头部导航栏 -->
    <nav class="bg-white shadow-sm">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar p-3 navbar-expand-lg navbar-light">
                        <a class="navbar-brand" href="#">
                            <img src="../../images/logo1.png" class="img-fluid" style="max-width:80px;" alt="logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse"
                            data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
                            aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">组队广场</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" href="#">
                                        活动广场
                                    </a>
                                </li>
                            </ul>
                            <ul class="navbar-nav ml-md-auto">
                                <li class="nav-item dropdown">
                                    <a class="btn btn-outline-primary nav-item  dropdown-toggle mr-md-2" href="#"
                                        id="bd-versions" data-toggle="dropdown" aria-haspopup="true"
                                        aria-expanded="false">
                                        发起<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cursor"
                                            fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd"
                                                d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z" />
                                        </svg>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
                                        <a class="dropdown-item " href="#">发起组队</a>
                                        <a class="dropdown-item " href="#" target="_blank">发起活动</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="btn btn-primary nav-item" href="#">
                                        消息<span class="badge badge-light ml-2">8</span>
                                        <span class="sr-only">unread messages</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-item  dropdown-toggle mr-md-2" href="#" id="my" data-toggle="dropdown"
                                        aria-haspopup="true" aria-expanded="false">
                                        <img class="img-fluid rounded-circle pl-2 ml-1" src="../../images/logo.jpg"
                                            style="max-width: 50px">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="my">
                                        <a class="dropdown-item " href="#">我的卡片</a>
                                        <a class="dropdown-item " href="#" target="_blank">个人中心</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item btn btn-primary btn-lg logoff-btn" href="#"
                                            data-toggle="modal" data-target="#logoffModal">退出登陆</a>
                                    </div>

                                </li>
                            </ul>

                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>

    <!-- 发送消息 -->
    <section>
        <div class="container">
            <div class="my-3 p-3 bg-white rounded shadow-sm">
                <h4 class="border-bottom border-gray pb-2 mb-0">
                    发起活动
                </h4>
                <form class="mt-3">
                    <div class="form-group row">
                        <label for="inputTitle" class="col-sm-2 col-form-label">标题:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control focus-form" id="inputTitle" placeholder="标题" required
                                autofocus>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-5 setprompt_1" id="title_prompt"></div>
                    </div>
                    <div class="form-group row">
                        <label for="inputScale" class="col-sm-2 col-form-label">规模:</label>
                        <div class="col-sm-3">
                            <select class="form-control focus-form" id="inputScale">
                                <option>校级</option>
                                <option>院级</option>
                                <option>省级</option>
                            </select>
                        </div>
                        <label for="inputType" class="col-sm-2 col-form-label text-md-right">类型:</label>
                        <div class="col-sm-3">
                            <select class="form-control focus-form" id="inputType">
                                <option>互联网+</option>
                                <option>软设</option>
                                <option>其他</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputEndTime" class="col-sm-2 col-form-label">截至时间:</label>
                        <div class="col-sm-8">
                            <input type="date" class="form-control focus-form" id="inputEndTime" placeholder="招募要求">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputContent" class="col-sm-2 col-form-label">内容:</label>
                        <div class="col-sm-8" id="editor">
                            <div id="div1"></div>
                            <textarea class="form-control" id="inputContent" placeholder="content" rows="5"
                                hidden></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-2"></div>
                        <div class="col-sm-8">
                            <button type="button" id="oa-btn" class="btn btn-primary mb-2 text-center oa-btn" data-toggle="modal"
                            data-target="#OAModal">发起活动</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </section>

    <!-- 退出登录的模态框 -->
    <div class="modal fade" id="logoffModal" tabindex="-1" role="dialog" aria-labelledby="logoffModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="prompt-text">点击"确定"退出账号</div>
                    <div class="bgimg_lf"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 发起活动的模态框 -->
    <!-- organize activities -->
    <div class="modal fade" id="OAModal" tabindex="-1" role="dialog" aria-labelledby="OAModalLabel" aria-hidden="true">
        <div class="modal-dialog dialog-oa">
            <div class="modal-content content-oa">
                <div class="modal-body body-oa">
                    <div class="prompt-text">成功发起活动</div>
                    <div class="bgimg_oa"></div>
                </div>
            </div>
        </div>
    </div>

    <!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.bundle.js"></script>
    <!-- 引入富文本编辑器.js -->
    <script type="text/javascript" src="../../js/wangEditor.min.js"></script>
    <script src="../../js/formLengthCheck.js"></script>
    <script type="text/javascript">
        const E = window.wangEditor
        const editor = new E('#div1')
        const $text1 = $('#inputContent')
        editor.config.focus = false
        editor.config.onchange = function (html) {
            // 第二步，监控变化，同步更新到 textarea
            $text1.val(html)
        }
        editor.create()

        // 第一步，初始化 textarea 的值
        $text1.val(editor.txt.html())

        //模态框显示和隐藏时 div编辑框样式更改
        $('#logoffModal').on('show.bs.modal', function () {
            $('.w-e-text').css({ "background-color": "rgb(128,128,128)" });
            $('.w-e-text-container').css('cssText',
                'border:1px solid rgb(103,106,109) !important; border-top:none !important; height:240px !important; z-index:10000 !important; background-color:rgb(128,128,128) ');
        });
        $('#logoffModal').on('hide.bs.modal', function () {
            $('.w-e-text').css({ "background-color": "rgb(255,255,255)" });
            $('.w-e-text-container').css('cssText',
                'border:1px solid rgb(206,212,218) !important; border-top:none !important; height:240px !important; z-index:10000 !important; background-color:rgb(255,255,255) ');
        });

        $('#OAModal').on('show.bs.modal', function () {
            $('.w-e-text').css({ "background-color": "rgb(128,128,128)" });
            $('.w-e-text-container').css('cssText',
                'border:1px solid rgb(103,106,109) !important; border-top:none !important; height:240px !important; z-index:10000 !important; background-color:rgb(128,128,128) ');
        });
        $('#OAModal').on('hide.bs.modal', function () {
            $('.w-e-text').css({ "background-color": "rgb(255,255,255)" });
            $('.w-e-text-container').css('cssText',
                'border:1px solid rgb(206,212,218) !important; border-top:none !important; height:240px !important; z-index:10000 !important; background-color:rgb(255,255,255) ');
        });


        $(document).ready(function () {

            $(".oa-btn").on("click", function () {

                $("#OAModal").modal('show');
                setTimeout("$('#OAModal').modal('hide')", "1000");

            })

        });
        checktitle();

    </script>
</body>

</html>